<template>
  <div class="home">
    <h1>欢迎使用管理系统</h1>
    
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :xs="24" :sm="12" :md="8" v-for="item in overviewData" :key="item.id">
        <el-card :body-style="{ padding: '20px' }">
          <div class="overview-item">
            <div class="item-icon">
              <i :class="['el-icon-' + item.icon, item.color]"></i>
            </div>
            <div class="item-info">
              <h3>{{ item.title }}</h3>
              <p class="item-value">{{ item.value }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 产品列表 -->
    <div class="product-section">
      <h2>热门产品</h2>
      <el-row :gutter="20" class="product-grid">
        <el-col :xs="24" :sm="12" :md="8" v-for="product in hotProducts" :key="product.id">
          <el-card shadow="hover" :body-style="{ padding: '15px' }">
            <div class="product-card">
              <div class="product-image" v-if="product.imageUrl">
                <!-- 实际项目中可以使用真实图片 -->
                <div class="image-placeholder" :style="{ backgroundColor: getRandomColor() }">{{ product.name.charAt(0) }}</div>
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <p class="product-price">¥{{ product.price.toFixed(2) }}</p>
                <p class="product-stock">库存: {{ product.stock }}</p>
                <div class="product-tags">
                  <el-tag size="small" v-for="tag in product.tags" :key="tag">{{ tag }}</el-tag>
                </div>
                <el-button type="primary" size="small" class="view-btn">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 系统设置信息 -->
    <div class="settings-section">
      <h2>系统信息</h2>
      <el-descriptions border :column="{ xs: 1, sm: 2 }" class="system-info">
        <el-descriptions-item label="系统版本">
          {{ systemSettings.version }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ systemSettings.updateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="运行状态">
          <el-tag type="success">{{ systemSettings.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="服务器环境">
          {{ systemSettings.environment }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <el-button type="primary" @click="testApi" class="api-test-btn">测试API</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '../utils/axios'
const { get } = api
import { ElMessage } from 'element-plus'
import { products, systemSettings } from '../utils/mockData.js'

const overviewData = ref([])
const hotProducts = ref([])

// 组件挂载时加载数据
onMounted(() => {
  // 准备概览数据
  overviewData.value = [
    { id: 1, title: '总用户数', value: '1,234', icon: 'user-solid', color: 'primary' },
    { id: 2, title: '产品总数', value: products.length, icon: 'goods', color: 'success' },
    { id: 3, title: '今日订单', value: '456', icon: 'shopping-cart', color: 'warning' },
  ]
  
  // 获取热门产品（这里简单取前4个）
  hotProducts.value = products.slice(0, 4)
})

// 获取随机颜色（用于产品图片占位符）
const getRandomColor = () => {
  const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399']
  return colors[Math.floor(Math.random() * colors.length)]
}

// 测试API调用
const testApi = async () => {
  try {
    // 由于是模拟环境，这里使用一个假的请求路径
    // 实际项目中应该替换为真实的API路径
    const response = await get('/api/test')
    ElMessage.success('API调用成功')
    console.log(response)
  } catch (error) {
    ElMessage.error('API调用失败: ' + error.message)
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
  height: 100%;
}

.overview-row {
  margin-top: 20px;
  margin-bottom: 30px;
}

.overview-item {
  display: flex;
  align-items: center;
}

.item-icon {
  font-size: 36px;
  margin-right: 20px;
}

.item-info {
  flex: 1;
}

.item-icon.primary {
  color: #409eff;
}

.item-icon.success {
  color: #67c23a;
}

.item-icon.warning {
  color: #e6a23c;
}

.item-icon.danger {
  color: #f56c6c;
}

.item-value {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
}

.product-section, .settings-section {
  margin-top: 40px;
}

.product-section h2, .settings-section h2 {
  margin-bottom: 20px;
  font-size: 18px;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-image {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.image-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.product-name {
  margin-top: 0;
  font-size: 16px;
  font-weight: 500;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
}

.product-stock {
  font-size: 14px;
  color: #606266;
  margin: 5px 0;
}

.product-tags {
  margin: 10px 0;
}

.view-btn {
  margin-top: 10px;
}

.system-info {
  margin-bottom: 20px;
}

.api-test-btn {
  margin-top: 30px;
}
</style>